<template>
<div class="zhty-course">
  <div class="course_left">
    <div class="left-top">
      <div class="top-item" @click="go('createCourse')">
        <div class="item-img">
          <img src="../../../assets/course_img/course.png" alt="">
        </div>
        <div class="item-title">
          创建体育课
        </div>
      </div>
      <div class="top-item" @click="go('schoolSource')">
        <div class="item-img">
          <img src="../../../assets/course_img/guanli.png" alt="">
        </div>
        <div class="item-title">
          教学资源管理
        </div>
      </div>
      <div class="top-item" @click="go('student')">
        <div class="item-img">
          <img src="../../../assets/course_img/stundet.png" alt="">
        </div>
        <div class="item-title">
          学生管理
        </div>
      </div>
      <div class="top-item" @click="go('devices')">
        <div class="item-img">
          <img src="../../../assets/course_img/shebeiguanli.png" alt="">
        </div>
        <div class="item-title">
          设备管理
        </div>
      </div>

    </div>
    <div class="loading-dialog" v-if="isLoading" v-loading="true"></div>
    <div class="left-content"  v-scroll="loadData">
      <div class="content-title">
        <div class="myCourse">我的体育课</div>
<!--        <div class="seeAll">查看全部</div>-->
      </div>
<!--      courseList-->
      <div class="nullSource" v-if="!courseList.length" style="width: 100%;height: 90%;display: flex;justify-content: center;align-items: center">
        <img src="../../../assets/course_img/nullSouceShow.png" style="width: 100%;height: 60%;object-fit: contain" alt="">
      </div>
        <div class="content-item" v-for="(item,index) in courseList" :key="index">
          <div class="item-top">
            <div class="top-time">
              <div class="time-date">{{item.dateTime}}</div>
              <!--            <div class="time-week">星期四</div>-->
              <div class="time-hour">{{item.startTime}} - {{item.endTime}}</div>
            </div>
            <div class="top-status">
              <div :class="item.courseType == 0 ? 'info' :item.courseType == 1 ?'success' :'danger'" class="status-color">{{item.courseType == 0 ? '未开始' :item.courseType == 1 ?"进行中" : "已结束"}}</div>
            </div>
          </div>
          <div class="item-class">
            <div class="class-name">
              {{item.className}}
            </div>
            <div class="class-caozuo">
              <button @click="editCourse(item)" v-if="item.courseType != 2">备课</button>
            </div>
          </div>
          <div class="item-source">
            <div class="source-val" v-for="val in keys[index]" :key="val">
              <div class="val-icon">

                <i v-if="item.imagefile[val].type == 1" class="iconfont icon-shipin2"></i>
                <i v-if="item.imagefile[val].type == 0" class="iconfont icon-tupian"></i>
              </div>
              <div class="val-text">
                {{item.imagefile[val].fileName}}
              </div>
              <div class="val-del" @click="delSource(item,val)">
                删除
              </div>
            </div>

          </div>
        </div>
    </div>
  </div>
  <div class="course_right">
    <div class="right-top">
      <div class="top-title">教学监管</div>
      <div class="top-tips">全方位追踪，助力科学管理</div>
      <img class="top-img" src="../../../assets/course_img/jianguan.png" alt="">
    </div>
    <div class="right-menu">
        <div class="menu-title">常用工具</div>
        <div class="menu-list">
          <div class="list-val" @click="go('class')">
            <div class="val-icon">
              <!-- <i class="iconfont icon-banji"></i> -->
              <img
                class="top-img"
                src="../../../assets/course_img/class.png"
                alt=""
              />
            </div>
            <div class="val-text">我的班级</div>
          </div>
          <div class="list-val" @click="go('newstudyAssignments')">
            <div class="val-icon">
              <img
                class="top-img"
                src="../../../assets/course_img/gzx.png"
                alt=""
              />
            </div>
            <div class="val-text">跟着学计划</div>
          </div>
          <div class="list-val" @click="go('planList')">
            <div class="val-icon">
              <!-- <i class="iconfont icon-banji"></i> -->
              <img
                class="top-img"
                src="../../../assets/course_img/tyzy.png"
                alt=""
              />
            </div>
            <div class="val-text">体育作业计划</div>
          </div>
         
          <div class="list-val" @click="go('newfollowThePractice')">
            <div class="val-icon">
              <img
                class="top-img"
                src="../../../assets/course_img/aitd.png"
                alt=""
              />
            </div>
            <div class="val-text">AI体锻作业计划</div>
          </div>
       
        </div>
      </div>
  </div>
</div>
</template>

<script>
import { getCourseList,delCourseSource } from "@/api/course";

export default {
  name: "index",
  data(){
    return {
      courseList:[],
      pageSource:{
        createAuthor:this.$store.state.user.USER_INFO.id,
        pageNum:1,
        pageSize:10
      },
      keys:[],
      isNull:false,
      isLoading:false
    }
  },
  created() {
    this.getCourseSource()
  },
  directives: {
    'scroll': {
      bind(el, binding) {
        el.addEventListener('scroll', function() {
          if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
            // 调用指令绑定的方法
            binding.value();
          }
        });
      }
    }
  },
  methods:{
    editCourse(e){
      console.log(e);
      this.$router.push("createCourse?item="+JSON.stringify(e));
    },
    delSource(item,val){
      this.$confirm('确定要删除当前课程下的资源吗', 'tips', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          delCourseSource({
            createAuthor:this.$store.state.user.USER_INFO.id,
            courseId:item.courseId,
            imageUrl:val
          }).then(response=>{
            this.pageSource.pageNum = 1;
            this.courseList = [];
            this.keys = [];
            this.getCourseSource()
            if(response.code == 200){
              this.$message.success("删除成功")
            }else{
              this.$message.error(response.message);
            }
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
          })
        });
    },
    loadData(){
      console.log(this.isNull)
      if(!this.isNull){
        this.pageSource.pageNum +=1;
        this.getCourseSource()
      }else{
        this.$notify.info({
          title: '消息',
          message: '已经没有课程啦～～～～'
        });
      }
    },
    getCourseSource(){
      this.isLoading = true;
      console.log(this.pageSource)
      getCourseList(this.pageSource).then(response=>{
        this.isLoading = false;
        if(response.code == 200){

          if(!response.result.all.length){
            this.isNull = true
          }
          this.courseList = [...this.courseList,...response.result.all];
          this.keys = [...this.keys,...response.result.all.map(item=>item.imageUrls)];
        }
      })
    },
    go(url){
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>
  .zhty-course {
      height: 100%;
      margin: 0vh 10vw 10vh;
      display: flex;
    .course_left{
      width: 80%;
      position: relative;
      .left-top {
        height: 8vh;
        background: #ffffff;
        margin-top: 3vh;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
        border-radius: 4px;
        display: flex;
        justify-content: space-around;
        .top-item{
          display: flex;
          width: 20%;
          padding: 0 1.5vw;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .item-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            img{
              object-fit: contain;
              width: 50%;
              height: 50%;}
          }
          .item-title{
            margin-left: .2vw;
            font-size: 1vw;
            color: #333333;
            white-space: nowrap;
          }
        }
      }
      .loading-dialog {
        height: 72vh;
        border-radius: 4px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
        background: rgba(255,255,255,.2);
        position: absolute;
        top: 12vh;
        width: 100%;
      }
      .left-content {
        height: 70vh;
        border-radius: 4px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
        margin-top: 2vh;
        background: #ffffff;
        padding: 1vh 2vw;
        overflow-y: auto;
        padding-bottom: 6vh;
        .content-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .myCourse {
            font-size: 1.2vw;
          }
          .seeAll {
            font-size: .7vw;
            color: #1677FF;
          }
        }
        .content-item {
          border-radius: .2vw;
          margin-top: 1vh;
          padding-bottom: 2.5vh;
          box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
          .item-top {
            display: flex;
            justify-content: space-between;
            padding: 1vh 1vw;
            margin-bottom: 1vh;
            .top-time {
              display: flex;
              align-items: end;
              .time-date {
                font-size: 1.1vw;
                font-weight: bold;

                color: #333333;
              }
              .time-week{
                font-size: .9vw;
                color: #666666;
                margin-left: .3vw;
                font-weight: 500;

              }
              .time-hour {
                font-size: .9vw;
                color: #666666;
                margin-left: .3vw;
                font-weight: 500;

              }
            }
            .top-status {
              display: flex;
              justify-content: center;
              align-items: center;
              .status-color {
                font-size: 1vw;
              }
              .info {
                color:#99998D ;
              }
              .danger {
                color:#FF6162 ;
              }
              .success {
                color:#52C41A ;
              }
            }
          }
          .item-class {
            background:#F0F8FF ;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1vh 1vw;
            padding: 1vh 1vw;
            font-size: 1vw;
            font-weight: 500;
            button {
              cursor: pointer;
              background: linear-gradient(90deg, #29D9FF, #2179FF);
              border-radius: 4px;
              color: #ffffff;
              border: none;
              padding: .5vh 1vw;
            }
          }
          .item-source {

            .source-val {
              display: flex;
              align-items: center;
              padding: .8vh .5vw;
              margin-left: 1vw;
              margin-right: 1vw;
              background: #F0F8FF;
              .val-icon {
                color: #1677FF;
                i{
                  font-size: 1.3vw;
                }
              }
              .val-text {
                color: #666666;
                margin-left: .2vw;
                font-size: 1vw;
              }
              .val-del {
                cursor: pointer;
                color: #FF6162;
                margin-left: 1vw;
                font-size: .9vw;
              }
            }
          }
        }
      }
    }
    .course_right{
      width: 17%;
      margin-left: 3%;
      .right-top {
        position: relative;
        height: 8vh;
        border-radius: 4px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
         background: #5CA0FF;
        margin-top: 3vh;
        display: flex;
        flex-direction: column;
        color: #FFFFFF;
        .top-title {
          font-weight: bold;
          font-size: 1vw;
          margin-top: 2vh;
          margin-left: 1vw;
        }
        .top-tips {
          font-weight: bold;
          font-size: .9vw;
          margin-top: 1vh;
          margin-left: 1vw;
          z-index: 2;
        }
        .top-img{
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 1;
        }

      }
      .right-menu {
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
      background: #ffffff;
      margin-top: 2vh;
      border-radius: 4px;
      padding: 1vh 1vw;
      .menu-title {
        font-size: 1.2vw;
        color: #333333;
        font-weight: 500;
        margin-bottom: 2vh;
      }
      .menu-list {
        display: flex;
        flex-direction: column;
        .list-val {
          display: flex;
          align-items: center;
          padding-bottom: 1vh;
          padding-top: 1vh;
          cursor: pointer;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0.1vh;
            background: #ececec;
            bottom: 0;
            transform: scaleX(0.7);
          }
          .val-icon {
            margin-left: 1vw;
            i {
              color: #1677ff;
              font-size: 1.5vw;
            }
          }
          .val-text {
            margin-left: 0.5vw;
            color: #333333;
            font-size: 1vw;
          }
        }
      }
    }
    }
  }
</style>
